<template>
  <el-form
    ref="form"
    :model="form"
    label-width="80px"
    :label-position="'top'"
    :rules="rules"
  >
    <el-form-item prop="repaired">
      <span slot="label">维修员接单上限 <br />
        <span style="color:#808080;font-size:12px">用以控制维修员可同时接收未完成的【维修单+维护单】数量上限</span></span>
      <el-input
        v-model="form.repaired"
        oninput="value=value.replace(/[^\d]/g,'')"
        maxlength="2"
        type="textarea"
        :disabled="!isEdit"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        v-if="!isEdit"
        type="primary"
        @click="
          () => {
            isEdit = true;
          }
        "
      >编辑</el-button>
      <el-button
        v-if="isEdit"
        type="primary"
        @click="onSubmit"
      >保存</el-button>
      <el-button
        v-if="isEdit"
        @click="onCancel"
      >取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isEdit: false,
      form: {
        desc1: "",
        repaired: null
      },
      rules: {
        repaired: [
          {
            validator: (rule, value, callback) => {
              console.log(value, "++value++");
              if (!value) {
                callback(new Error("请输入维修员接单上限"));
                return;
              } else if (value == 0) {
                callback(new Error("接单上限不能为0"));
                return;
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    ...mapState(["system_deviceCategory", "app"])
  },
  created() {
    this.query();
  },
  mounted() {
    // this.query();
  },
  methods: {
    async query() {
      await this.$store.dispatch("system_deviceCategory/requestRepaired");
      this.form.repaired = this.$store.state.system_deviceCategory.repaired;
    },
    onSubmit() {
      this.$store
        .dispatch("system_deviceCategory/saveRepairedInfo", this.form.repaired)
        .then(res => {
          this.isEdit = false;
        });
    },
    async onCancel() {
      await this.$store.dispatch("system_deviceCategory/requestRepaired");
      this.form.repaired = this.$store.state.system_deviceCategory.repaired;
      this.isEdit = false;
    }
  }
};
</script>
